<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8"/>
    <meta content="0" http-equiv="Expires"/>
    <meta content="no-cache" http-equiv="Pragma"/>
    <meta content="no-cache" http-equiv="Cache-control"/>
    <meta content="no-cache" http-equiv="Cache"/>
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible"/>

    <!-- favicon -->
    <link rel="shortcut icon" th:href="@{/static/slide/img/favicon.png}" type="image/x-icon"/>

    <!-- title -->
    <title th:if="${systemTitle}" th:text="'第三方账号绑定 | '+${systemTitle}"></title>
    <title th:text="'第三方账号绑定 | HZERO'" th:unless="${systemTitle}"></title>


    <link rel="stylesheet" th:href="@{/static/slide/css/bootstrap-3.3.7/css/bootstrap.min.css}"/>
    <link rel="stylesheet" th:href="@{/static/slide/css/open-app-bind.css}"/>

    <script th:src="@{/static/slide/js/jquery.min.js}"></script>
    <script th:src="@{/static/slide/js/jquery.validate.min.js}"></script>
    <script th:src="@{/static/slide/js/jsencrypt.min.js}"></script>
    <script th:src="@{/static/slide/js/open-app-bind.js}"></script>

    <!--/* use for template data */-->
    <template data-captchaGetUrl="/oauth/public/captcha" data-linkToFindPwd="/oauth/public/slide/password_find.html"
              id="templateData"
              th:attr="data-copyright=${copyright},data-logoSrc=${logoUrl},data-captchaMessage=${captchaMessage},data-captchaMessage=${captchaMessage},data-passwordMessage=${passwordMessage},data-userNameMessage=${userNameMessage},data-isNeedCaptcha=${isNeedCaptcha},data-loginErrorMsg=${loginErrorMsg},data-publicKey=${publicKey},data-accountEncrypt=${accountEncrypt},data-passwordEncrypt=${passwordEncrypt}">
    </template>
</head>

<body class="open-app-bind">
<div id="app">
    <div class="bind-container bind-layout">
        <div class="bind-layout-content">
            <div class="bind-tab">
                <div class="bind-tabs">
                    <div class="bind-tabs-tab-content">
                        <div class="bind-tabs-tab-pane  bind-tab-pane bind-account">
                            <div class="logo">
                                <a href="">
                                    <img alt="HZERO" height="32px"
                                         th:src="${logoUrl}?${logoUrl}:'/oauth/static/slide/img/logo.png'"/>
                                </a>
                            </div>
                            <form id="bindFormAccount">
                                <div class="bind-form">
                                    <div class="bind-form-item bind-form-item-with-help">
                      <span class="bind-form-item-children">
                        <div class="bind-form-explain" th:utext="${loginErrorMsg}"></div>
                      </span>
                                    </div>
                                    <div class="bind-form-item">
                      <span class="bind-form-item-children">
                        <span class="bind-form-item-children-prefix">
                          <div class="bind-input-content">
                            <span class="bind-form-input-prefix">
                              <i class="glyphicon glyphicon-user"></i>
                            </span>
                            <div class="form-group bind-form-item-children-input">
                              <input class="form-control bind-form-input" id="username" name="username"
                                     th:placeholder="${userNamePlaceholder}"
                                     th:value="${param.username != null ? param.username[0] : ''}"
                                     type="text">
                            </div>
                          </div>
                        </span>
                      </span>
                                    </div>
                                    <div class="bind-form-item">
                      <span class="bind-form-item-children">
                        <span class="bind-form-item-children-prefix">
                          <div class="bind-input-content">
                            <span class="bind-form-input-prefix">
                              <i class="glyphicon glyphicon-lock"></i>
                            </span>
                            <div class="form-group bind-form-item-children-input">
                              <input class="form-control bind-form-input" id="password" name="password"
                                     th:placeholder="${passwordPlaceholder}"
                                     type="password">
                              <span class="glyphicon glyphicon-eye-close look"></span>
                            </div>
                          </div>
                        </span>
                      </span>
                                    </div>
                                    <div class="bind-form-item" th:if="${isNeedCaptcha}">
                      <span class="bind-form-item-children">
                        <div class="bind-row">
                          <div class="bind-col-12">
                            <span class="bind-form-item-children-prefix">
                              <div class="bind-input-content">
                                <span class="bind-form-input-prefix">
                                  <i class="glyphicon glyphicon-pencil"></i>
                                </span>
                                <div class="form-group bind-form-item-children-input">
                                  <input class="form-control bind-form-input" id="captcha" name="captcha"
                                         th:placeholder="${captchaPlaceholder}"
                                         type="text">
                                </div>
                              </div>
                            </span>
                          </div>
                          <div class="bind-col-12">
                            <a class="bind-account-captcha">
                              <img alt="Captcha" class="bind-account-captcha-image" src="/oauth/public/captcha"/>
                            </a>
                          </div>
                        </div>
                      </span>
                                    </div>
                                    <div class="bind-account-find-password bind-form-item">
                      <span class="bind-form-item-children">
                        <a href="/oauth/public/slide/password_find.html" target="_self" th:text="${findPassword}">
                        </a>
                      </span>
                                    </div>
                                </div>
                                <div class="bind-form-item">
                    <span class="bind-form-item-children">
                      <button class="btn btn-primary btn-raised bind-account-bind-btn" th:text="${bindButton}"
                              type="submit"></button>
                    </span>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer" th:utext="${copyright}?${copyright}:'Copyright © The HZERO Author®.All rights reserved.'">
        </div>
    </div>
</div>
<div style="display: none">
    <!--/* because thymeleaf don't let use access request */-->
    <input id="login-hidden-defaultUserName" th:value="${param.username != null ? param.username[0] : ''}"
           type="password">
</div>
<div class="bind-notification"></div>
</body>

</html>